<template>
    <n-message-provider>
        <InfoPage :imgUrl="movieData.imgUrl" :movie-id="movieData.movieId">
            <template #title>
                {{ movieData.name }}
            </template>
            <template #content>
                <!--{{ movieData.content }}-->
                <template v-for="comment in movieData.comments">
                    <n-card :title="comment.name" size="large">
                        <template #header-extra>
                            <n-avatar size="small" :src="comment.avatarUrl" />
                        </template>
                        {{comment.comment}}
                    </n-card>
                </template>


            </template>
        </InfoPage>
    </n-message-provider>

</template>

<script>
import InfoPage from './InfoPage.vue';
import { fetchMovie } from '../util';
import { comment } from '../user';
export default {
    props: ['name'],
    components: {
        InfoPage
    },
    mounted() {
        console.log(this.$route.params.name);
        var moive_name = this.$route.params.name;
        fetchMovie(moive_name).then((respond) => {
            this.movieData = respond;

        });

    },
    data() {
        return {
            movieData: {
                imgUrl: '',
                title: '',
                content: '',
                comments: []
            }
        }
    },
}
</script>